<template>
    <div id="main">
        <el-form ref="ruleForm2" :model="loginInfo" :rules="rules" label-width="100px" class="demo-ruleForm">
            <h2>系统管理员登录界面</h2>
            <el-form-item label="用户名" prop="account">
                <el-input type="text" v-model="loginInfo.username" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pword">
                <el-input type="password" v-model="loginInfo.password" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">登录</el-button>
                <el-button @click="resetFrom">重置</el-button>
                <el-button @click="cut">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { Glogin } from '../api'
import { ElMessage } from 'element-plus'

let router = useRouter()

let loginInfo = reactive({
    username: 'GLY001',
    password: 'gly001pd'
})

// 表单验证规则
const rules = reactive({
    // account: [
    //   { required: true, message: '请输入账号', trigger: 'blur' },
    //   // { min: 5, max: 24, message: '账号长度在6-24位之间', trigger: 'blur' },
    // ],
    // pword: [
    //   { required: true, message: '请输入密码', trigger: 'blur' },
    //   // { min: 5, max: 24, message: '账号长度在6-24位之间', trigger: 'blur' },
    // ]
})

const submitForm = () => {
    const { username, password } = loginInfo

    Glogin(username, password).then(res => {

        if (res.data.Code == 1) {
            // 解构info中的数据 headerimg nickname
            let { headerimg, nickname } = res.data.info
            ElMessage({
                type: 'success',
                message: '登录成功！'
            })
            console.log(res.data.info);
            sessionStorage.setItem('admin', JSON.stringify({ headerimg, nickname }))
            router.push({ path: '/home' })
        } else {
            alert('登录失败！')
        }
    })
}

const cut = () => {
    router.push('/')
}

const resetFrom = () => {
    console.log('aaaaaaaa')
}


</script>
  
<style lang="less" scoped>
#main {
    height: 100vh;
    position: relative;
    background-image: url(../assets/images/bg.a35a0ecc.jpg);

    .el-form {
        width: 450px;
        position: fixed;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        background-color: aliceblue;
        padding: 20px;

        h2 {
            text-align: center;
            margin-bottom: 20px;
        }
    }
}
</style>